... And updated the EUI docs to use the new pattern.

Component updates/additions

EuiPage

• grow: To easily facilitate allowing the whole page to stretch to fit vertically.
• direction: Changes the flex-direction property. Originally added because I wanted to remove the EuiPageBody dependency, but found the EuiPageBody to be a better solution. Leaving it in, just as a nice solution for others.

EuiPageBody

• panelled: Uses an EuiPanel as the main component instead of a plain div
• panelProps: Extends any extra EuiPanel props if panelled=true
• paddingSize: For changes to overall padding for both EuiPanel and plain div

EuiPageContent

Fix: I'm pretty sure I fixed the overflowing of content when the EuiPageContent component is a flex item next to EuiSideBar by adding min-width: 0.

EuiPageContentBody

• restrictWidth: Aligns with all other EuiPage component restrictWidth props
• paddingSize: Also to align with all other EuiPage component padding sizes

EuiPageHeader

• Added paddingSize to align with all other EuiPage component padding sizes
• Moved docs to their own page

EuiPageHeaderContent

• Updated the EuiTabs component to render the large size.

EuiPageSideBar

• Added $euiPageSidebarMinWidth global token for updating the hard-coded min-width
• Added the prop sticky for easily allowing the sidebar to scroll independently of the page contents. The euiHeaderAffordForFixed() Sass mixin now also applies any extra styling to .euiSideBar--sticky to afford for any fixed headers.

[NEW] EuiPageTemplate

Similar to the EuiSelectableSitewideTemplate component this new EuiPageTemplate component is a shortcut for creating the different types of page layout patterns described in the docs. It is somewhat opinionated, but still with the ability to customize most of the inner components with props like sideBarProps and pageContentProps.

This template may not be complete at this time, but provides solutions with a quick way to opt in to the new layout patterns. And fixes #3743

Example. This simple React usage:

<EuiPageTemplate
  pageSideBar={sideNav}
  pageHeader={{
    iconType: 'logoElastic',
    pageTitle: 'Page title',
    rightSideItems: [button],
    tabs: [{ label: 'Tab 1', isSelected: true }, { label: 'Tab 2' }],
  }}>
    {content}
</EuiPageTemplate>

Will render as:

Four types of templates

As of right now there are 4 template types, all with/without sideBars: 'default' | 'centeredBody' | 'centeredContent' | 'empty'. The example above is the default. The centered options allow for either the whole body or just the content to be centered depending, usually, on which part is the "empty" state.

centeredBody

centeredContent

empty
Good for more free-form body content like dashboards.

Padding size and max-widths

Both the restrictWidth and paddingSize props can be applied as this top layer and will apply them to all the appropriate inner components. It also defaults the restrictWidth to true so that most layouts are automatically maxed.

Other component fixes

EuiBreadcrumbs truncation

Since I re-discovered the min-width: 0 trick for flex items and noticed that long header breadcrumbs were breaking the header layouts, I added this directly to the EuiBreadcrumb component.

EuiHeaderSectionItemButton only rendered a <button>

These buttons weren't accepting href's like I needed for the docs updates with putting the github and design library links in the header. Now the component just extends EuiButtonEmpty to easily get all the states and types necessary for allowing both onClick and href.

This also removed the specific :hover states to be more inline with our empty button behavior which has none.

Docs updates/additions

Added an EuiHeader to house the theme switcher and other links that previously only existed on the home page

I've also made the design library and codesandbox links theme aware. Meaning, depending on the currently selected theme, it will update these library links to point to that theme's library and the codesandbox link will import the corresponding CSS file.

Added the ability to create custom demo tabs

For these new EuiPage docs, I really wanted to show both how to use the template version and how to create the same layout manually with the corresponding components. I could have used the Demo JS and Snippet tabs for this, but I wanted to be more explicit than that. I also wanted to be able to have all the import statements for both (which Snippets do not automatically come with).

So now you can pass something like the following into the source key of the guide section, and it will render similar to our current Demo JS tab but with a custom tab displayName.

{
  type: GuideSectionTypes.JS,
  code: PageCustomContentTemplateSource,
  displayName: 'Template JS',
}

The tabs will also now render in the order they're given in the source.

Updated the home page 😸

Follow-ups

There are still a few minor things to work out like:

• More EuiHeader z-index issues
• Figure out how to allow EuiPanel to render any component like <main>

Checklist (Still working on most of these)

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs and playground toggles
• Added documentation
• Checked Code Sandbox works for the any docs examples
• Added or updated jest tests
• [ ] Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately